.right {
    margin-left: auto;
    margin-right: 3rem;
}

.showchart {
    height: 750px;
    width: 95%;
}

.showchart_data {
    height: 640px;
    width: 95%;
}

div[id*="chart"] {
    /* 数据图表-块背景 */
    background-color: #f0f5f9;
    border: 3px solid #eee;
    border-radius: 10px;
}

.h-inline {
    /* h标签不换行 */
    display: inline;
}


.chart_container {
    /* 日时间分布图的容器，旋转用 */
    height: 92vh;  
    background-color: #c9d6df; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

/* 上页面导航栏，被选中时的样式 */
.actmore {
    font-size: 1.2rem;  
    font-weight: bold;  
    border-bottom: 2px solid #08d9d6;  
    padding-bottom: 3px;  
    transition: all 0.3s ease;  
}
@media screen and (max-width: 1000px) {
    .actmore {
        font-size: 1.7rem;
    }
}

/* 电脑端适配 */
@media screen and (min-width: 1001px) {
    .hide-lg {
        display: none;
    }
}

/* 手机端适配 */
/* 媒体查询要放在后边才行，否则仍然可以覆盖 */
@media screen and (max-width: 1000px) {
    /* 手机端 - 底部导航栏 */
    body{
        padding-bottom: 10rem;  /* 底部导航栏高度8rem，以防遮盖内容 */
    }
    .icon-size {
        font-size: 5rem;
    }
    a.icon-size {
        text-decoration: none; /* 不要下划线 */
        color: inherit;
    }
    .nav-buttom {
        padding-inline: 6rem;
    }
    .hide-sm {
        display: none;
    }
    .c-expand {
        max-width: 100%;
        flex: auto;
    }
    /* 手机端头像别被压瘪了 */
    .c-col-2-5 {
        max-width: calc((100% / 12) * 2.5);
        flex: auto;
    }


    body {
        font-size: 1.5rem;
    }
    h5, h6 {
        font-size: 1.5rem;
    }

    /* 对一些字体大小区别调整 */
    .mt-info {
        font-size: 1.2rem;
    }
    .mt-title {
        font-size: 2.0rem;
    }
    .mt-hide {
        display: none;
    }
    /* 左侧导航栏 */
    .btn-group-vertical a {
        font-size: 1.5rem;
    }
    .btn {
        font-size: 1.5rem;
    }

    /* 图由宽而长 */
    .showchart {
        /* 视口单位vh是相对于视口（浏览器窗口）的尺寸。 */
        margin-top: 2rem;
        height: calc(100vh - 12rem - 12rem); /* 减去可能的顶、底部导航栏高度 */
        width: 95%;
    }
    .showchart_data {
        width: 95%;
        height: 95%;
    }
    .chart_container {
        /* 日时间分布图的容器，旋转用 */
        transform: rotate(90deg) translateY(-100%);
        transform-origin: top left;
        width: calc(100vh - 12rem - 8rem);
        height: 95vw;
    }

    /* 修改bootstrap的模态框样式 */
    .modal-dialog {
        max-width: 75%;
        margin: 1.75rem auto;
    }
}
